<template>
	<view class="u-slider" @tap="onClick" :class="[disabled ? 'u-slider--disabled' : '']" :style="{
		backgroundColor: ccInactiveColor,
		'--primary': $theme.primary,
		'--primary-light': $theme.primaryLight
	}">
		<view
			class="u-slider__gap"
			:style="[
				{
					height: height + 'rpx',
					backgroundColor: ccSliderActiveColor
				}
			]"
		>
			<view class="u-slider__button-wrap" 
				:prop="moveData"
				:change:prop="move.propObserver" 
				@touchstart="move.onTouchStart" 
				@touchmove="move.onTouchMove" 
				@touchend="move.onTouchEnd" 
				@touchcancel="move.onTouchEnd">
				<slot v-if="$slots.default"/>
				<view v-else class="u-slider__button" :style="[blockStyle, {
					height: blockWidth + 'rpx',
					width: blockWidth + 'rpx'
				}]"></view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * slider 滑块选择器
	 * @tutorial https://uviewui.com/components/slider.html
	 * @property {Number | String} value 滑块默认值（默认0）
	 * @property {Number | String} min 最小值（默认0）
	 * @property {Number | String} max 最大值（默认100）
	 * @property {Number | String} step 步长（默认1）
	 * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
	 * @property {Number | String} height 滑块条高度，单位rpx（默认6）
	 * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
	 * @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
	 * @property {String} blockColor 滑块颜色（默认#ffffff）
	 * @property {Object} blockStyle 给滑块自定义样式，对象形式
	 * @property {Boolean} disabled 是否禁用滑块(默认为false)
	 * @event {Function} start 滑动触发
	 * @event {Function} moving 正在滑动中
	 * @event {Function} end 滑动结束
	 * @example <u-slider v-model="value" />
	 */
	export default {
		name: 'u-slider',
		props: {
			// 当前进度百分比值，范围0-100
			value: {
				type: [Number, String],
				default: 0
			},
			// 是否禁用滑块
			disabled: {
				type: Boolean,
				default: false
			},
			// 滑块宽度，高等于宽，单位rpx
			blockWidth: {
				type: [Number, String],
				default: 25
			},
			// 最小值
			min: {
				type: [Number, String],
				default: 0
			},
			// 最大值
			max: {
				type: [Number, String],
				default: 100
			},
			// 步进值
			step: {
				type: [Number, String],
				default: 1
			},
			// 滑块条高度，单位rpx
			height: {
				type: [Number, String],
				default: 10
			},
			// 进度条的激活部分颜色
			activeColor: {
				type: String,
				default: '#2979ff'
			},
			// 进度条的背景颜色
			inactiveColor: {
				type: String,
				default: '#c0c4cc'
			},
			// 滑块的背景颜色
			blockColor: {
				type: String,
				default: '#ffffff'
			},
			// 用户对滑块的自定义颜色
			blockStyle: {
				type: Object,
				default() {
					return {};
				}
			},
		},
		data() {
			return {
				moveData: null
			};
		},
		watch: {
			value(newValue) {
				this.moveData.value = newValue;
			}
		},
		mounted() {
			// 获取滑块条的尺寸信息
			const query = uni.createSelectorQuery().in(this);
			query.select('.u-slider').boundingClientRect(data => {
				this.moveData = {
					disabled: this.disabled,
					max: this.max,
					min: this.min,
					step: this.step,
					value: this.value,
					sliderRect: data
				}
			}).exec();
		},
		computed: {
			ccInactiveColor() {
				return this.$theme.primaryLight
			},
			ccSliderActiveColor() {
				return this.$theme.primary
			}
		},
		methods: {
			start() {
				this.$emit('start')
			},
			moving() {
				this.$emit('moving')
			},
			end({value}) {
				this.$emit('end', value)
			},
			input({value}) {
				this.$emit('input', value)
			},
			onClick(event) {
				if (this.disabled) return;
				// 直接点击滑块的情况，计算方式与onTouchMove方法相同
				const value = ((event.detail.x - this.moveData.sliderRect.left) / this.moveData.sliderRect.width) * 100;
				this.moveData.value = value;
				this.$emit('clickChange', this.format(value))
			},
			format(value) {
				let num = Math.round(value / this.step) * this.step;
				let numArr = (this.step + '').split('.');
				let smalls = numArr[1]?.length ?? 0;
				return Number(num.toFixed(smalls));
			}
		}
	};
</script>

<script module="move" lang="wxs" src="./move.wxs"></script>

<style lang="scss" scoped>
.u-slider {
	width: calc(100% - 60rpx);
	margin: 0 30rpx;
	box-sizing: border-box;
	position: relative;
	border-radius: 999px;
	background-color: var(--primary-light);
}

.u-slider:before {
	position: absolute;
	right: 0;
	left: 0;
	content: '';
	top: -8px;
	bottom: -8px;
	z-index: -1;
}

.u-slider__gap {
	width: 0;
	position: relative;
	border-radius: inherit;
	transition: width 0.2s;
	background-color: var(--primary);
}

.u-slider__button {
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	background-color: #fff;
	cursor: pointer;
	// ADD CODE
	height: 25rpx;
	width: 25rpx;
	border: 8rpx solid var(--primary);
	box-shadow: none;
	// END
}

.u-slider__button-wrap {
	height: 80rpx;
	width: 80rpx;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
}

.u-slider--disabled {
	opacity: 0.5;
}
</style>
